<!doctype html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>新增银行卡</title>
    <link rel="stylesheet" type="text/css" href="../../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../../css/common.css" />
    <link rel="stylesheet" type="text/css" href="../../../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../../../css/aui-pull-refresh.css" />
    <link rel="stylesheet" type="text/css" href="../../../css/swiper.min.css" />
    <link rel="stylesheet" type="text/css" href="../../../css/style.css" />
    <style>
        html,
        body {
            /*background: #fff;*/
        }

        .inner_header {
            font-size: 1.6rem;
            color: #000000;
            font-weight: 600;
            height: 6.9rem;
            margin: 0;
            padding: 2.4rem 0 0 0;
            box-sizing: border-box;
            background: none!important;
            box-shadow: 0rem 0rem 0.8rem 0rem rgba(0, 0, 0, 0.08);
            background: #fff!important;
        }

        .success {
            font-size: 1.4rem;
            color: #6f6f6f;
            letter-spacing: 0.03rem;
        }

        .content {
            width: 100%;
            float: left;
            margin: 6.9rem 0 0 0;
        }

        .content_title {
            width: 100%;
            height: 3.7rem;
            float: left;
            font-size: 1.3rem;
            line-height: 3.7rem;
            letter-spacing: 0.03rem;
            color: #999999;
            box-sizing: border-box;
            padding: 0 1.3rem;
        }

        .content_box {
            width: 100%;
            box-sizing: border-box;
            padding: 0 1.65rem 0 1.35rem;
            float: left;
            background: #fff;
        }

        .content_box_list {
            width: 100%;
            height: 4.45rem;
            border-bottom: 0.1rem solid #f2f2f2;
            background: #fff;
        }

        .content_box .content_box_list:last-child() {
            border-bottom: none;
        }

        .box_list_left {
            width: 23.5%;
            height: 100%;
            line-height: 4.45rem;
            float: left;
        }

        .box_list_right {
            width: 76.5%;
            float: left;
            height: 100%;
            line-height: 4.45rem;
        }

        .list_right_ipt {
            width: 100%!important;
            height: 100%!important;
            line-height: 4.45rem!important;
            font-size: 1.5rem!important;
        }

        .content_bottom {
            width: 100%;
            height: 4rem;
            float: left;
            margin: 4.65rem auto 0 auto;
        }

        .content_btn {
            width: 93%;
            height: 4rem;
            background-color: #ed6a20;
            border-radius: 1.98rem;
            text-align: center;
            line-height: 4rem;
            color: #fff;
            margin: auto;
        }

        .agreement {
            letter-spacing: 0.03rem;
            color: #c9c9c9;
            line-height: 4.45rem;
        }

        .aui-radio:checked,
        .aui-radio.aui-checked,
        .aui-checkbox:checked,
        .aui-checkbox.aui-checked {
            background-color: #ed6a20;
            border: solid 1px #ed6a20;
        }

        .rewrite_checkbox {
            color: #c9c9c9;
            margin: 1.6rem 0.65rem 0 0;
        }
        .aui-toast .aui-toast-content{
            color:#fff
        }
    </style>
</head>

<body>
    <div id="app">
        <header class="aui-bar aui-bar-nav aui-bar-light inner_header">
            <a class="aui-pull-left aui-btn" onclick="goBack()">
                <img src="../../../image/back.png">
            </a>
            <div class="aui-title">添加银行卡</div>
            <a class="aui-pull-right share_nav_right">
                <div class="success">取消</div>
            </a>
        </header>
        <div class="content">
            <div class="content_title">请填银行卡所属银行</div>
            <div class="content_box">
                <div class="content_box_list">
                    <div class="box_list_left">
                        身份证号码
                    </div>
                    <div class="box_list_right">
                        <input type="text" class="list_right_ipt" placeholder="请输入身份证号码" ref="id_card">
                    </div>
                </div>
                <div class="content_box_list">
                    <div class="box_list_left">
                        预留手机号
                    </div>
                    <div class="box_list_right">
                        <input type="text" class="list_right_ipt" placeholder="请输入预留手机号码" ref="phone">
                    </div>
                </div>
            </div>
            <div class="content_bottom">
                <div class="content_btn" @click="submit()">
                    提交
                </div>
            </div>
        </div>
    </div>
</body>

</html>
<script type="text/javascript" src="../../../script/api.js"></script>
<script type="text/javascript" src="../../../script/zepto.js"></script>
<script type="text/javascript" src="../../../script/axios.min.js"></script>
<script type="text/javascript" src="../../../script/axios-config.js"></script>
<script type="text/javascript" src="../../../script/vue.min.js"></script>
<script type="text/javascript" src="../../../script/swiper.min.js"></script>
<script type="text/javascript" src="../../../script/utils.js"></script>
<script type="text/javascript" src="../../../script/common.js"></script>
<script type="text/javascript" src="../../../script/aui-tab.js"></script>
<script type="text/javascript" src="../../../script/aui-toast.js"></script>
<script type="text/javascript" src="../../../script/aui-scroll.js"></script>
<script type="text/javascript" src="../../../script/aui-pull-refresh.js"></script>

<script type="text/javascript">
    apiready = function() {
        //setRefresh()
        var toast = new auiToast({})
        var data = api.pageParam.data;
        var vue = new Vue({
            el: "#app",
            data: {
                type: 1,
                data: data, //上一个页面传来的数据
            },
            mounted: function() {
                console.log(JSON.stringify(data));
            },
            methods: {
                submit:function(){
                    var data = this.data
                    data["token"] = $api.getStorage('token');
                    data["card_id"] = this.$refs.id_card.value
                    data["telephone"] = this.$refs.phone.value
                    console.log(JSON.stringify(data))
                    data = verification(data)
                    if (data.code == 1) {
                        console.log("验证成功")
                        Axios.post(window.Url.bind_bank,data.data).then(function(res) {
                            console.log(JSON.stringify(res))
                            if(res.status==0){
                                toast.fail({
                                    title: res.info,
                                    duration: 1000
                                });
                            }else if(res.status==1){
                                toast.success({
                                    title: res.info,
                                    duration: 1000
                                });
                                setTimeout(function(){
                                    api.sendEvent({
                                        name: 'updata_bank',
                                        extra: {
                                            info: "updata_bank",
                                        }
                                    });
                                    api.closeToWin({
                                        name: "capital_bank_card"
                                    });
                                }, 1000);

                            }
                        })

                    } else {
                        toast.fail({
                            title: data.data,
                            duration: 1000
                        });
                    }
                }
            },
        })
    }

    //刷新
    function setRefresh() {
        var pullRefresh = new auiPullToRefresh({
            container: document.querySelector('.aui-refresh-content'),
            triggerDistance: 100
        }, function(ret) {
            if (ret.status == "success") {
                setTimeout(function() {
                    pullRefresh.cancelLoading(); //刷新成功后调用此方法隐藏
                }, 1500)
            }
        })
    }

    function goBack() {
        api.closeWin({});
    }
    function verification(data) {
        for (let a in data) {
            switch (a) {
                case "card_id":
                    let card_id = data[a]
                     card_id = isCardNo(card_id)
                    if(card_id==false){
                        let status = {code:0,data:"身份证号码不符"}
                        return status
                    }
                    break;
                case "telephone":
                    let telephone = data[a]
                    telephone = checkPhone(telephone)
                    if(telephone==false){
                        let status = {code:0,data:"手机号码有误"}
                        return status
                    }
                    break;
                default:
            }
        }
        let status = {
            code: 1,
            data: data
        }
        return status
    }
function checkPhone(telephone){
    if(!(/^1[34578]\d{9}$/.test(telephone))|| !telephone){
        return false;
    }
}
function isCardNo(card_id) {
    // 身份证号码为15位或者18位，15位时全为数字，18位前17位为数字，最后一位是校验位，可能为数字或字符X
    var reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
    if (reg.test(card_id) == false || !card_id) {
        return false;
    }
}
</script>
